
$(document).ready(function(){
newFigure();

function newFigure(){
	var a = new DrawFigure();
}

function DrawFigure(){
	var drawcolor = "red";
	var start = true;
	var linewidth = 5;
	var mouseX, mouseY;
	var xchords = new Array();
	var ychords = new Array();
	var counter = 0;

	//INIT START CANVAS
	var canvas = document.getElementById('canvas');
	cnx = canvas.getContext('2d');
	cnx.strokeStyle = drawcolor;
	cnx.fillStyle = drawcolor;
	cnx.beginPath();
	cnx.lineWidth = linewidth;
	//INIT END CANVAS

	//DRAW NEW LINES START
	$("#canvas").click(function(e){
		mouseX = e.pageX;
		mouseY = e.pageY;
		if(start){
			cnx.moveTo(mouseX,mouseY);
			start=false;
		}else{
			cnx.lineTo(mouseX,mouseY);
			cnx.stroke();
			//save chords for each click
			xchords[counter] = mouseX;
			ychords[counter] = mouseY;
			counter++;
		}
	});
	//DRAW NEW LINES END

	//CHANGE COLOR OF LINE/FILL START
	$("#color").change(function(e){
		drawcolor = $("#color option:selected").text();
		cnx.strokeStyle = drawcolor;
	});
	//CHANGE COLOR OF LINE/FILL END

	//FILL AND FINISH LINE START
	//$("#fillbutton").click(function(){
		//cnx.lineTo(initX, initY);
	//});

	$("#submit").click(function(){
		cnx.strokeStyle = 'black';
		cnx.fillStyle = drawcolor;
		cnx.stroke();
		cnx.fill();
		cnx.closePath();

		switch(drawcolor){
			case 'Darkblue':
				r = 72; g = 61; b = 139; break;
			case 'Lightblue':
				r = 135; g = 206; b = 250; break;
			case 'Red':
				r = 205; g = 92; b = 92; break;
			case 'Black':
				r = 0; g = 0; b = 0; break;
			case 'Green':
				r = 84; g = 139; b = 84; break;
			case 'White':
				r = 255; g = 255; b = 255; break;
			case 'Yellow':
				r = 255; g = 255; b = 0; break;
		}
		var name = $("#province").val()
		var data = { x : xchords, y : ychords, rcol : r, gcol : g, bcol : b};
		$.post('create_province.php', {chords : data, "name" : name});
		newFigure();
		return false;
	});
	//FILL AND FINISH LINE END
	
}
})
